<template>
  <el-card class="main-content" style="width: 60vw">
    <base-description v-if="merchantInfo" :data="merchantInfo" :fields="showFields" title="商家信息"></base-description>

    <div style="text-align: center;gap: 20px;margin-top: 20px">
      <el-button icon="edit" type="primary" @click="dialogRef.open(merchantInfo)">修改信息</el-button>
    </div>
  </el-card>

  <base-dialog
      ref="dialogRef"
      :fields="formFields"
      title="修改商家信息"
      @submit="handleSubmit"
  />
</template>

<script setup>
import {onMounted, ref} from "vue";
import {fields} from "@/model/merchant.js";
import BaseDialog from "@/components/common/BaseDialog.vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import BaseDescription from "@/components/common/BaseDescription.vue";

const dialogRef = ref(null)
const merchantInfo = ref(null)
const showFields = fields.filter(e => !['location'].includes(e.prop))
const formFields = fields.filter(e => !['userId', 'location', 'role', 'status', 'createTime', 'rating'].includes(e.prop))

onMounted(async () => {
  merchantInfo.value = await request.get('/merchant/current')
})

const handleSubmit = async (formData) => {
  await request.put('/merchant', formData)
  ElMessage.success('修改成功')
  dialogRef.value.close()
  merchantInfo.value = await request.get('/merchant/current')
}
</script>

<style scoped>
</style>